<!--代码逻辑和样式库-->
<script src="./dictionary-management.component.js"></script>
<style src="./dictionary-management.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 操作按钮 -->
    <div class="content-container">
      <el-row>
        <el-col :span="24" align="right" class="buttons-container aq-vertical-middle flex-end">
          <el-button v-waves v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-edit" @click="openEditDetailDialog('create')">
            创建
          </el-button>
          <el-button v-waves v-if="codesCheck.indexOf('Delete') !== -1" type="danger" icon="el-icon-delete" @click="deleteSelectedData()">
            删除
          </el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 搜索区域 -->
    <div v-if="codesCheck.indexOf('Query') !== -1" class="search-container">
      <el-form label-position="top">
        <el-row type="flex">
          <el-col :span="16" class="aq-vertical-middle">
            <el-input v-if="codesCheck.indexOf('Query') !== -1" v-model="queryString" placeholder="请输入关键字" class="keyword" clearable @keyup.enter.native="search()" />
          </el-col>
          <el-col :span="8" class="aq-vertical-middle flex-end">
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" @click="search()">
              查询
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <el-table v-loading="loading" :data="dataList" border fit highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column prop="tableName" label="表名">
          <template slot-scope="scope">
            <el-button v-if="codesCheck.indexOf('Edit') != -1" type="text" @click="openEditDetailDialog('edit', scope.row)">{{ scope.row.tableName }}</el-button>
            <span v-if="codesCheck.indexOf('Edit') == -1">{{ scope.row.tableName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="名字" />
        <el-table-column prop="itemValue" label="值" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="sort" label="排序" />
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <!-- 创建/编辑信息弹窗开始 -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="500px">
      <el-form ref="dataForm" :rules="editRules" :model="editForm" label-position="top">
        <el-row :gutter="20">
          <el-col :xs="32" :sm="32" :lg="32">
            <el-form-item prop="tableName" label="表名:" label-width="70px">
              <el-input v-model="editForm.tableName" class="el-input-width" />
            </el-form-item>
          </el-col>

          <el-col :xs="32" :sm="32" :lg="32">
            <el-form-item prop="itemName" label="名字:" label-width="70px">
              <el-input v-model="editForm.itemName" class="el-input-width" />
            </el-form-item>
          </el-col>

          <el-col :xs="32" :sm="32" :lg="32">
            <el-form-item prop="itemValue" label="值:" label-width="70px">
              <el-input v-model="editForm.itemValue" class="el-input-width" />
            </el-form-item>
          </el-col>

          <el-col :xs="32" :sm="32" :lg="32">
            <el-form-item label="备注:" label-width="70px">
              <el-input v-model="editForm.remark" class="el-input-width" />
            </el-form-item>
          </el-col>

          <el-col :xs="32" :sm="32" :lg="32">
            <el-form-item prop="sort" label="排序:" label-width="70px">
              <el-input v-model="editForm.sort" class="el-input-width" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="aq-margin-top-12">
          <el-col :xs="24" :sm="24" :lg="24" align="right">
            <el-button type="primary" class="action-btn" @click="save()">确定</el-button>
            <el-button class="action-btn" @click="editDialogVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 创建/编辑信息弹窗结束 -->
  </div>
</template>
